<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>DataGrid</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="DataGrid">
	<meta name="author" content="xu.fei@outlook.com">

	<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet"/>
</head>
<body>
<div class="span12">
	<div class="header">
		<h3>Staff Management</h3>
	</div>
	<div>
		<div id="grid1" class="row"></div>
		<div class="row">
			<div class="header">
				<h4>Detail</h4>
			</div>
			<hr/>
			<form class="form-horizontal span6">
				<div class="control-group">
					<label class="control-label" for="inputIndex">Index</label>
					<div class="controls">
						<input type="text" id="inputIndex" placeholder="Index">
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="inputGender">Gender</label>
					<div class="controls">
						<input type="text" id="inputGender" placeholder="Gender">
					</div>
				</div>
			</form>
			<form class="form-horizontal span6">
				<div class="control-group">
					<label class="control-label" for="inputName">Name</label>
					<div class="controls">
						<input type="text" id="inputName" placeholder="Name">
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="inputAge">Age</label>
					<div class="controls">
						<input type="text" id="inputAge" placeholder="age">
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="modal-footer">
		<div id="operateBtns">
			<button class="btn btn-primary" onclick="newClicked()">New</button>
			<button class="btn btn-primary" onclick="modifyClicked()"><i class="icon-edit icon-white"></i>Modify</button>
			<button class="btn btn-primary" onclick="deleteClicked()"><i class="icon-remove icon-white"></i>Delete</button>
		</div>
		<div id="confirmBtns">
			<button class="btn btn-primary" onclick="okClicked()"><i class="icon-ok icon-white"></i>OK</button>
			<button class="btn btn-primary" onclick="cancelClicked()">Cancel</button>
		</div>
	</div>
</div>

<script type="text/javascript" src="js/thin.js"></script>
<script type="text/javascript" src="js/modules/controls/datagrid.js"></script>
<script type="text/javascript">
	thin.module("A", [], function() {
		return "a";
	});

	thin.module("B", [], function() {
		return "b";
	});

	thin.module("C", [], function() {
		return "c";
	});

	thin.module("D", ["A", "B", "C"], function(B, A, C) {
		return B + A + C;
	});

	var D = thin.get("D");
	alert(D);

	var DataGrid = thin.get("DataGrid");
	var state = "View";

	var grid = new DataGrid(document.getElementById("grid1"));

	grid.addEventListener("loadCompleted", function(event) {
		if (event.target.rows.length > 0) {
			event.target.select(event.target.rows[0]);
		}
	});

	grid.addEventListener("changed", function(event) {
		var data;
		if (event.newRow) {
			data = event.newRow.data;
		}
		else {
			data = {};
		}

		setFormData(data);
	});

	grid.addEventListener("rowInserted", function(event) {
		event.target.select(event.newRow);
	});

	grid.addEventListener("rowRemoved", function(event) {
		if (event.target.rows.length > 0) {
			event.target.select(event.target.rows[0]);
		}
	});

	init();

	function init() {
		enableForm(false);
		switchButtons("Operate");

		var columns = [{
			label: "#",
			field: "index"
		}, {
			label: "Name",
			field: "name"
		}, {
			label: "Gender",
			field: "gender"
		}, {
			label: "Age",
			field: "age"
		}];

		var data = [{
			index: 1,
			name: "Tom",
			gender: "Male",
			age: 5
		}, {
			index: 2,
			name: "Jerry",
			gender: "Female",
			age: 2
		}, {
			index: 3,
			name: "Sun Wukong",
			gender: "Male",
			age: 1024
		}];

		grid.loadColumns(columns);
		grid.loadData(data);
	}

	function newClicked() {
		state = "New";
		switchButtons("Confirm");
		enableForm(true);

		setFormData({});
	}

	function modifyClicked() {
		state = "Modify";
		switchButtons("Confirm");
		enableForm(true);
	}

	function deleteClicked() {
		if (confirm("Sure?")) {
			grid.removeRow(grid.selectedRow);
		}
	}

	function okClicked() {
		var data = {
			index: document.getElementById("inputIndex").value,
			name: document.getElementById("inputName").value,
			gender: document.getElementById("inputGender").value,
			age: document.getElementById("inputAge").value
		};

		if (state === "New") {
			grid.insertRow(data);
		}
		else if (state === "Modify") {
			grid.selectedRow.refresh(data);
		}
		state = "View";
		switchButtons("Operate");
		enableForm(false);
	}

	function cancelClicked() {
		state = "View";
		switchButtons("Operate");
		enableForm(false);

		setFormData(grid.selectedRow.data);
	}

	function enableForm(flag) {
		document.getElementById("inputIndex").disabled = !flag;
		document.getElementById("inputName").disabled = !flag;
		document.getElementById("inputGender").disabled = !flag;
		document.getElementById("inputAge").disabled = !flag;
	}

	function switchButtons(group) {
		if (group === "Operate") {
			document.getElementById("operateBtns").style.display = "";
			document.getElementById("confirmBtns").style.display = "none";
		}
		else if (group === "Confirm") {
			document.getElementById("operateBtns").style.display = "none";
			document.getElementById("confirmBtns").style.display = "";
		}
	}

	function getFormData() {
		return {
			index: document.getElementById("inputIndex").value,
			name: document.getElementById("inputName").value,
			gender: document.getElementById("inputGender").value,
			age: document.getElementById("inputAge").value
		};
	}

	function setFormData(data) {
		document.getElementById("inputIndex").value = data.index || "";
		document.getElementById("inputName").value = data.name || "";
		document.getElementById("inputGender").value = data.gender || "";
		document.getElementById("inputAge").value = data.age || "";
	}
</script>
</body>
</html>